<template>
    <el-dialog v-model="visible" title="旋转动画设置" width="30%" draggable>
        <div>
            <el-row>
                <label for="selrotategraphbtnID" style="padding-right:10px;position: relative; left:10px">旋转对象</label>
                <el-button id="selrotategraphbtnID" type="primary" @click="onSelRotateGraphs">
                    图中选择
                </el-button>
            </el-row>
            <el-row>
                <label for="cntPointInput" style="padding-right:10px;position: relative; left:10px">旋转中心</label>
                <el-button type="primary" @click="onSelPointOnMap">图中选择</el-button>
                <el-radio-group v-model="rotateMode">
                 <el-radio label="fixed" size="large" border style="width:15%;">固定</el-radio>
                 <el-radio label="dynamic" size="large" border style="width:15%;">随对象</el-radio>
                </el-radio-group>
                <el-input v-model="cntPoint" autofocus size="mini" :ref="cntPointInput" id="cntPointInput"></el-input>
            </el-row>
            <el-row>
                <label for="speedInputID" style="padding-right:10px;position: relative; left:10px">旋转速度(度/每秒)</label>
                <el-input v-model="speed" autofocus size="mini" :ref="countInput" id="speedInputID"></el-input>
            </el-row>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">Cancel</el-button>
                <el-button type="primary" @click="onConfirm">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
        
<script  setup>
import { ref, onMounted } from 'vue'
import {LGXEnums}  from '../../script/canvas/common/sysenum'
const visible = ref(false)
const speed = ref(2)
const cntPoint = ref("0,0")
const rotDestList = ref([]);
const rotPathObj = ref(null);
const rotateMode = ref("fixed")
const pickDestMode = ref("pickPoint")

onMounted(() => {
    // window.mainctl.appendSelGraphListner(this);
})

var notifySelGraph = function (mousePoint,list) {
    console.log("rotate act2PickGraphs --------------");
    window.mainctl.removeSelGraphListner(window.RotateAnimateDlg.value);
    visible.value = true;

    if (pickDestMode.value == "pickPoint"){
        let sx = mousePoint.x.toFixed(4);
        let sy = mousePoint.y.toFixed(4);
        cntPoint.value = sx + "," + sy;
        if (list.length == 1){
            rotPathObj.value = list[0];
            rotateMode.value = "dynamic";
        }
        else{
            rotateMode.value = "fixed";
            rotPathObj.value = null;
        }
    }
    else if (pickDestMode.value == "pickGraph"){
        rotDestList.value = list;
    }
}

const onConfirm = () => {
    console.log("rotate animate  confirm --------------");
    visible.value = false;

    let cntDesc = cntPoint.value;
    let coordLst = cntDesc.split(",");
    if (coordLst.length != 2) {
        return null;
    }
    let xdesc = coordLst[0];
    let ydesc = coordLst[1];
    let x = parseFloat(xdesc);
    let y = parseFloat(ydesc);
    let mousePt = { x, y };

    if (rotateMode.value == "fixed"){
        rotPathObj.value = null;
    }

    let rotInfo = { obj: rotDestList.value,pathObj:rotPathObj.value, speed: speed.value, rotCnt: mousePt }
    window.mainctl.m_pAnimateINTF.setAnimate("rotate", rotInfo);
}

const onSelPointOnMap = () => {
    visible.value = false;
    pickDestMode.value = "pickPoint";
    window.selPointSrcDlgType = "rotateAnimate";
    window.mainctl.setMapWorkMode(LGXEnums.LGXWorkMode.PickPointMode);
    window.mainctl.appendSelGraphListner(window.RotateAnimateDlg.value);
}

const onSelRotateGraphs = () => {
    visible.value = false;
    pickDestMode.value = "pickGraph";
    window.mainctl.setMapWorkMode(LGXEnums.LGXWorkMode.ModifyMode);
    window.mainctl.appendSelGraphListner(window.RotateAnimateDlg.value);
}

defineExpose({
    visible,
    onMounted,
    notifySelGraph
});

</script>
        